<!DOCTYPE html>
<html lang="zh">

<head>
    <title>天嘉智慧云</title>
    <#include "/headerTj.html">

        <style>
            #container {
                height: 600px;
                width: 100%;
            }

            .progress {
                margin-bottom: 0px;
            }

            .panel-body-nopad {
                padding: 0px;

            }

            a.tdblue {
                border-style: solid;
                padding: 2.5px;
                border-width: 1px;
                border-color: #5bc0de;
                color: #5bc0de;
                margin-right: 3px;
                border-radius: 15%;
            }

            a.tdred {
                border-style: solid;
                padding: 2.5px;
                border-width: 1px;
                border-color: red;
                color: red;
                border-radius: 15%;
            }
        </style>
        </head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <div id="page-wrapper">
        <div class="container-fluid">


            <div class="row">
                <ul id="myTab" class="nav nav-pills">
                    <li class="nobtnli"><a href="#opt" data-toggle="tab"><i class="fa fa-user fa-fw"></i> 人员信息录入</a>
                    </li>
                    <li class="nobtnli actli"><a href="#home" data-toggle="tab"><i class="fa fa-truck fa-fw"></i> <span>车辆信息录入</span></i>
                    </a><i class="fa fa-close fa-fw"></i></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <div class="panel panel-default">
                            <div class="panel-body nopaddingtop">

                                <div class="row rowdispcar">
                                    <br/>
                                    <div class="col-lg-12">
                                        <div class="form-group col-lg-3">
                                            <label>车牌号码:</label>
                                            <input type="text" class="form-control form-inline-opt"/>
                                        </div>
                                        <div class="form-group col-lg-3">
                                            <label>设备ID:</label>
                                            <input type="text" class="form-control form-inline-opt"/>
                                        </div>
                                        <div class="form-group col-lg-3">
                                            <a class="btn btn-info " style="width:40%;float:left;"><i
                                                    class="fa fa-search" aria-hidden="true"></i> 查询</a>
                                            <a class="btn btn-info form-inline btn-add-car"
                                               style="width:40%;float:right;" href="#"><i class="fa fa-plus"
                                                                                          aria-hidden="true"></i> 新增</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="row rowdispcar">
                                    <br/>
                                    <div class="col-lg-12">
                                        <table class="table table-striped table-hover table-bordered datatable"
                                               id="cars-infotable">
                                            <thead>
                                            <tr>
                                                <th><label style="margin-bottom:0px"><input type="checkbox" value=""> 全选</label>
                                                </th>
                                                <th>内部编号</th>
                                                <th>车牌号码</th>
                                                <th>设备ID</th>
                                                <th>IMEI</th>
                                                <th>车辆类型</th>
                                                <th>底盘类型</th>
                                                <th>车辆状态</th>
                                                <th>更多</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 1</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 2</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>闲</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 3</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>计划</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 4</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>维修</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 5</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>驾驶</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 6</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>闲</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 7</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>闲</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 8</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>闲</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 9</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>驾驶</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 10</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 11</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 12</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 13</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 14</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" value=""/> 15</td>
                                                <td>1001253</td>
                                                <td>苏K88888</td>
                                                <td>D666666</td>
                                                <td>13305888888</td>
                                                <td></td>
                                                <td></td>
                                                <td>忙</td>
                                                <td><a class="tdblue" onclick="addcar()"> 详细 </a><a class="tdred">
                                                    删除 </a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="row rowaddcar">
                                    <br/>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">魔盒ID:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">车辆IMEI:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">SIM卡号:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="row form-group ">
                                            <label class="col-md-3 llabel">车牌号码:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group ">
                                            <label class="col-md-3 llabel">车辆内部编号:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group ">
                                            <label class="col-md-3 llabel">车辆类型:</label>
                                            <select class="col-md-3 form-control form-inline-opt">
                                                <option value="">请选择....</option>
                                                <optgroup label="清扫保洁类">
                                                    <option value="">洗扫车</option>
                                                    <option value="">清扫车</option>
                                                    <option value="">除雪车</option>
                                                    <option value="">铲雪车</option>
                                                    <option value="">扫路车</option>
                                                    <option value="">清洗车</option>
                                                    <option value="">洒水车</option>
                                                    <option value="">撒布车</option>
                                                    <option value="">吸尘车</option>
                                                    <option value="">多功能车</option>
                                                </optgroup>
                                                <option value="">市政园林养护车</option>
                                                <optgroup label="垃圾转运类">
                                                    <option value="">压缩式垃圾车</option>
                                                    <option value="">餐厨垃圾车</option>
                                                    <option value="">自卸式垃圾车</option>
                                                    <option value="">压缩式对接垃圾车</option>
                                                    <option value="">桶装垃圾运输车</option>
                                                    <option value="">车厢可卸式垃圾车</option>
                                                </optgroup>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-4">
                                        <div class="row ">
                                            <label class="col-md-3 llabel">出厂日期:</label>
                                            <input type="date" class="form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">购买日期:</label>
                                            <input type="date" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">行驶证有效期:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">道路运输证:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">整车型号:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">改装厂商:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">发动机号:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">车架号:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">底盘类别:</label>
                                            <select class="col-md-3 form-control form-inline form-inline-opt">
                                                <option value="">请选择....</option>
                                                <option>一类</option>
                                                <option>二类</option>
                                                <option>三类</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">底盘品牌:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">上装容积:</label>
                                            <input type="text" class="col-md-3 form-control form-inline-opt"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">关联负责人:</label>
                                            <select class="col-md-3 form-control form-inline form-inline-opt">
                                                <option value="">请选择....</option>
                                                <option>于泽天</option>
                                                <option>欧阳翰东</option>
                                                <option>杨辰</option>
                                                <option>秦斌</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">驾驶员:</label>
                                            <select class="col-md-3 form-control form-inline form-inline-opt">
                                                <option value="">请选择....</option>
                                                <option>韩子辰</option>
                                                <option>钱德明</option>
                                                <option>郑鸿信</option>
                                                <option>周黎明</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group ">
                                            <label class="col-md-3 llabel">车辆状态:</label>
                                            <select class="col-md-3 form-control form-inline-opt">
                                                <option value="">请选择....</option>
                                                <optgroup label="正常">
                                                    <option value="">离线</option>
                                                    <option value="">在线</option>
                                                </optgroup>
                                                <optgroup label="故障告警">
                                                    <option value="">车门未关闭告警</option>
                                                    <option value="">动力蓄电池故障</option>
                                                    <option value="">燃油不足</option>
                                                    <option value="">胎压不足告警</option>
                                                    <option value="">发动机机油量告警</option>
                                                    <option value="">水温告警</option>
                                                    <option value="">传动系统告警</option>
                                                    <option value="">变速箱过热告警</option>
                                                    <option value="">机油压力告警</option>
                                                    <option value="">车速告警</option>
                                                    <option value="">滞留告警</option>
                                                    <option value="">根据陀螺仪四个方向的告警</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">燃料种类:</label>
                                            <select class="col-md-3 form-control form-inline form-inline-opt">
                                                <option value="">请选择....</option>
                                                <option>柴油</option>
                                                <option>汽油</option>
                                                <option>天然气</option>
                                                <option>电动</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">所属项目:</label>
                                            <select class="col-md-3 form-control form-inline form-inline-opt">
                                                <option value="">请选择....</option>
                                                <option>项目1</option>
                                                <option>项目2</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="row form-group">
                                            <label class="col-md-3 llabel">所属区域:</label>
                                            <select class="col-md-3 form-control form-inline form-inline-opt multipleselect"
                                                    multiple="multiple">
                                                <option>区域1</option>
                                                <option>区域2</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-4 col-lg-offset-4">
                                        <a href="#" class="btn btn-info btn-to-add-car text-middle"
                                           style="text-align:center;"> 新增车辆</a>
                                        <a href="#" class="btn btn-info btn-to-add-car text-middle"
                                           style="text-align:center;"> 保存修改</a>
                                    </div>

                                </div>
                            </div>


                        </div>

                    </div>

                </div>
            </div>

        </div>

    </div>


    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->

    <!-- Custom Theme JavaScript -->
    <script src="../vendor/sb-admin-2/sb-admin-2.js"></script>
    <script src="../vendor/bootstrap-select/bootstrap-select.min.js"></script>
    <script src="../vendor/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../vendor/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>

    <script>

        $(document).ready(function () {
            $('.rowaddcar').hide();
            $('.rowdispcar').show();
            $('.multipleselect').multiselect({
                nonSelectedText: '未选择',
                allSelectedText: '全选中'
            });
        })

        $('.btn-to-add-car').click(function () {
            $('.rowaddcar').hide();
            $('.rowdispcar').show();

        });


        $('.btn-add-car').click(function () {
            $('.rowaddcar').show();
            $('.rowdispcar').hide();

        });

        function addcar() {
            $('.rowaddcar').show();
            $('.rowdispcar').hide();
        };

        $('#cars-infotable').bootstrapTable({
            striped: true,
            pagination: true,
            pageSize: 10,
            search: false,
            showPaginationSwitch: true,
            sortName: 'time',
            striped: true,
            showPaginationSwitch: true,
            showToggle: true,
            paginationDetailHAlign: 'right'
        });
    </script>

</body>

</html>
